<template>
    <div class="cart">
      <el-table :data="cartStore.items" style="width: 100%">
        <el-table-column prop="name" label="商品名称"></el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
        <el-table-column label="数量">
          <template #default="{ row }">
            <el-input-number v-model="row.quantity" :min="1" @change="() => updateQuantity(row)"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button @click="() => removeItem(row.id)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="total-price">
        总价：{{ cartStore.totalPrice }}
      </div>
    </div>
  </template>
  
  <script setup>
  import { useCartStore } from '../stores/cartStore';
  
  const cartStore = useCartStore();
  
  const updateQuantity = (item) => {
    // 更新商品数量
    if (item.quantity <= 0) {
      cartStore.removeItem(item.id);
    } else {
      cartStore.updateItemQuantity(item.id, item.quantity);
    }
  };
  
  const removeItem = (id) => {
    // 移除商品
    cartStore.removeItem(id);
  };
  
  
  </script>
  
  <style>
  .cart {
    margin: 20px;
  }
  
  .total-price {
    margin-top: 20px;
    text-align: right;
    font-size: 1.2em;
    font-weight: bold;
  }
  </style>
  